<template>
  <div class="container">
    <scroll-view :scroll-y="true"
                 :style="{'height': '100%'}">
      <!-- 收货地址 -->
      <div class="info">
        <p class="user_name"
           v-if="userInfo.address"
           @tap="choose_add">
          收货人：{{userInfo.receive_name}}
          <span class="tel">{{userInfo.phone}}</span>
        </p>
        <div class="dv"
             v-if="userInfo.address"
             @tap="choose_add">
          <img :src="ImgBaseUrl+'shouye/dingwei@2x.png'"
               alt
               class="icon_gps" />
          <p class="address">收货人地址:{{userInfo.detail_address + userInfo.address}}</p>
          <img src="https://h5.ameimeika.com/mp_images/jifenshangcheng/xiangqingye/xiayibu@2x.png"
               class="icon_right" />
        </div>

        <div class="un_dv"
             v-if="!userInfo.address"
             @tap="choose_add">
          <p class="goto_choose">请选择收货地址</p>
          <img src="https://h5.ameimeika.com/mp_images/jifenshangcheng/xiangqingye/xiayibu@2x.png"
               class="n_icon" />
        </div>
        <div class="address_line"></div>
      </div>
      <!-- 填写身份证号 -->
      <div class="note_book idCard_box"
           v-if="is_cross_border">
        <p class="beizhu beizhu1">身份证号</p>
        <input v-model="idCard"
               class="beizhu_inp inp1"
               type="text"
               placeholder="因海关需要，请填写收货人身份证号" />
      </div>
      <!-- 商品信息 -->
      <div class="mall"
           v-for="(item,index) in shopList"
           :key="index">
        <div class="shop_left">
          <img :src="imgUrl+item.images"
               alt
               class="mall_img" />
        </div>
        <div class="shop_right">
          <p class="mall_name">
            <span class="icon"
                  v-if="item.cross_border == 1"></span>
            {{item.title}}
          </p>
          <p class="plus"
             v-if="item.plus_title&&item.plus_title!=''">
            {{item.plus_title}}
          </p>
          <p class="mall_specs">
            <span class="mall_specs_left">{{item.spec_stem}}</span>
            <span class="mall_specs_right">×{{item.good_num}}</span>
          </p>
          <p class="mall_price">
            <span class="mall_price_left">￥</span>
            <span class="mall_price_right">{{item.price}}</span>
            <span v-if="sign_mark != 1 && item.deduction_credit>0"
                  class="mall_price_kou">积分可抵￥{{item.deduction_credit}}</span>
          </p>
        </div>
      </div>
      <!-- plus -->
      <div class="plus clearfix">
        <div class="tip">
          PLUS会员优惠
        </div>
        <div class="num"
             v-if="shopdata.is_plus==1">
          -￥{{shopdata.plus_price}}
        </div>
        <div class="open"
             v-if="shopdata.is_plus!=1"
             @tap.stop="to_plus()">
          立即开通 <img :src="imgUrl+'mp_3.0/返回@2x.png'"
               v-if="imgUrl"
               alt=""
               class="icon">
        </div>
      </div>
      <!-- 可用积分 -->
      <div v-if="sign_mark != 1 && deduction_credit_status"
           class="use_count">
        账户可消费积分:
        <span class="use_count_jf">{{user_create}}</span>
      </div>
      <!-- 使用积分抵扣 -->
      <div v-if="sign_mark != 1 && deduction_credit_status"
           class="chhoose_use_jf">
        <p class="chhoose_use_intro">
          <!-- 本次使用{{kou_credit}}积分抵扣
          <span class="chhoose_intro_num">
            <i class="money_icon">￥</i>
            {{kou_credit}}
          </span> -->
          可使用积分抵扣
        </p>
        <p class="chhoose_use_sel">
          <span @tap="creadite_fix(0)"
                class="num_less">-</span>
          <input class="num_self"
                 @input="credite_input()"
                 v-model="kou_credit"
                 type="number" />
          <span @tap="creadite_fix(1)"
                class="num_add">+</span>
        </p>
      </div>

      <!-- 价格合计 -->
      <div class="price_detail price_result">
        <!-- <p class="price_intro">
          <span class="price_intro_left">商品金额</span>
          <span class="price_intro_right">
            <i class="money_icon">¥</i>
            {{all_price}}
          </span>
        </p> -->
        <!-- <p v-if="sign_mark != 1 && deduction_credit_status"
           class="price_intro">
          <span class="price_intro_left">积分抵扣</span>
          <span class="price_intro_right jsfont">
            <i class="money_icon create_icon">-</i>
            {{kou_credit}}
          </span>
        </p> -->
        <p class="price_intro last_price">
          <span class="price_intro_left fontSize">抵扣后金额</span>
          <span class="price_intro_right">
            <i class="money_icon">￥</i>
            {{chajia_price}}
          </span>
        </p>
      </div>
      <!-- 优惠券-运费 -->
      <div class="quan_yunfei">
        <!-- 优惠券 -->
        <div class="specification clearfix"
             @tap="chech_ticket()">
          <div class="tips"
               :class="[ticket.length <= 0 || canuse_ticket.length <= 0 ? 'tips_gray' : '']">券</div>
          <div class="selections"
               v-if="t_ticket_name == '' && canuse_ticket[0]">{{canuse_ticket.length}}张可用</div>
          <div class="selections"
               v-if="t_ticket_name != '' ">{{t_ticket_name}}</div>
          <div class="selections"
               v-if="ticket.length <= 0 || canuse_ticket.length <= 0">无可用优惠券</div>
          <img v-if="ticket.length > 0"
               src="https://h5.ameimeika.com/mp_images/jifenshangcheng/xiangqingye/xiayibu@2x.png"
               mode="widthFix"
               class="icon" />
        </div>
        <!-- 优惠金额和运费 -->
        <div class="price_detail">
          <p v-if="sign_mark != 1"
             class="price_intro"
             style="margin-top:0;">
            <span class="price_intro_left">优惠</span>
            <span class="price_intro_right"
                  :class="[ticket_money <=0 ? 'youhui_gray' : '']">
              <i v-if="ticket_money >0"
                 class="money_icon">-￥</i>
              <i v-if="ticket_money <=0"
                 class="money_icon">￥</i>
              {{ticket_money}}
            </span>
          </p>
          <p class="price_intro last_price">
            <span class="price_intro_left">运费</span>
            <span class="price_intro_right">
              <i class="money_icon">￥</i>
              {{freight_price}}
            </span>
          </p>
        </div>
      </div>
      <!-- 备注 -->
      <div class="note_book">
        <p class="beizhu">备注</p>
        <input v-model="book_inp"
               class="beizhu_inp"
               type="text" />
        <p v-if="book_inp != '' "
           @tap="clear_inp()"
           class="beizhu_icon">
          <icon type="clear"
                size="20"
                color="#aaa" />
        </p>
      </div>
      <div class="zhanwei"></div>
      <!-- 选择优惠券 -->
      <div class="mask"
           v-if="ticket_isShow">
        <div class="mallbox add_radius">
          <div class="mall_box">
            <div class="titles">
              <p class="title_t">优惠券列表</p>
              <p class="close"
                 @tap="closeMask">×</p>
            </div>
            <scroll-view :scroll-y="true"
                         :style="{'height': '474px'}">
              <ul class="list">
                <li class="ticket"
                    @tap="use_ticket(item)"
                    v-for="(item, index) in canuse_ticket"
                    :key="index">
                  <div class="left">
                    <!-- 满减券 -->
                    <div class="center"
                         v-if="item.source!=3">
                      <div class="money">
                        <div class="icon">￥</div>
                        <div class="num">{{item.type_money}}</div>
                      </div>
                      <div class="tip">
                        满{{item.type_min_money}}可用
                      </div>
                    </div>
                    <!-- 特殊券 -->
                    <div class="center special"
                         v-if="item.source==3">
                      体验券
                    </div>
                  </div>
                  <div class="right">
                    <div class="t-title clearfix">
                      <div class="t-type">
                        [{{item.source_name}}]
                      </div>
                      <div class="t-name">
                        {{item.type_name}}
                      </div>
                    </div>
                    <div class="dec">
                      可在{{item.condtion_name}}使用
                    </div>
                    <div class="timer">
                      {{item.start}}~{{item.end}}
                    </div>
                  </div>
                  <div class="user-btn">
                    <img :src="ImgBaseUrl+'/mp_3.0/mine/coupon_empty@2x.png'"
                         v-if="ImgBaseUrl&&!item.is_selected"
                         alt=""
                         class="img">
                    <img :src="ImgBaseUrl+'/mp_3.0/mine/coupon_selected@2x.png'"
                         v-if="ImgBaseUrl&&item.is_selected"
                         alt=""
                         class="img">
                  </div>
                </li>
                <!-- <li class="list-item"
                    v-for="(item, index) in ticket"
                    :key="index">
                  <div class="detail clearfix"
                       :class="[item.is_selected ? 'detail_selected':'']">
                    <div class="left">
                      <div class="price_d"
                           :class="[item.can_active ? 'price_d_gray' : '']">￥{{item.type_money}}</div>
                      <p class="tip_d">{{item.type_name}}</p>
                    </div>
                    <div class="right clearfix">
                      <div class="name">
                        <div class="type"
                             :class="[item.can_active ? 'type_gray' : '']">现金券</div>
                        <div class="ticket-name">{{item.source}}</div>
                      </div>
                      <div class="descript">
                        <div>
                          可在
                          <span class="tip"
                                :class="[item.can_active ? 'tip_gray' : '']">{{item.con}}</span>中使用
                        </div>
                      </div>
                      <div class="data">{{item.start}}-{{item.end}}</div>
                    </div>
                    <div class="right_top"
                         :class="[item.is_selected ? 'right_top_selected':'']"></div>
                    <div class="right_bottom"
                         :class="[item.is_selected ? 'right_bottom_selected':'']"></div>
                  </div>
                  <div class="status"
                       :class="[item.can_active ? 'status_gray' : '']"
                       @tap="use_ticket(item)">
                    <ul class="icon_circle clearfix">
                      <li class="circle"
                          :class="[item.is_selected ? 'circle_selected':'']"></li>
                      <li class="circle"
                          :class="[item.is_selected ? 'circle_selected':'']"></li>
                      <li class="circle"
                          :class="[item.is_selected ? 'circle_selected':'']"></li>
                      <li class="circle"
                          :class="[item.is_selected ? 'circle_selected':'']"></li>
                      <li class="circle"
                          :class="[item.is_selected ? 'circle_selected':'']"></li>
                    </ul>
                    <div class="use"
                         v-if="!item.is_selected">立即使用</div>
                    <div class="use"
                         v-if="item.is_selected">
                      <p class="iconss">
                        <img class="imgicon"
                             src="https://h5.ameimeika.com/mp_images/mp_2.6/ok.png" />
                      </p>
                    </div>
                    <div class="left_top"></div>
                    <div class="left_bottom"></div>
                  </div>
                </li> -->
              </ul>
            </scroll-view>
          </div>
        </div>
      </div>
    </scroll-view>
    <div class="bottom">
      <div class="bottom_item">
        <div class="total_bottom">
          合计:
          <span class="money_icon">￥</span>
          <span class="money">{{fixes_price}}</span>
        </div>
        <button class="calculate"
                @tap="submitOrder">提交订单</button>
      </div>
    </div>
  </div>
</template>
<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      imgUrl: common.image_response,
      ImgBaseUrl: common.image_resource,
      shopList: [],
      userInfo: "",
      all_price: 0, //接口返回商品总价
      freight_price: 0.0, //运费
      ticket: [], //优惠券列表
      canuse_ticket: [], //可点击选择的优惠券
      ticket_id: 0,
      sign_mark: "",
      isHidden: false,
      ticket_isShow: false, //优惠券弹框
      t_ticket_name: "", //优惠券名
      ticket_money: "0.00", //优惠券价格
      ticket_min_money: 0, //优惠券满足金额
      chajia_price: 0, //商品总价 - 积分 = 抵扣后金额
      user_create: 0,
      book_inp: "", //备注
      goods_id: 0, //商品id
      good_num: 0, //商品or面膜数量
      good_spec_price_id: 0, //商品组合id
      fixes_price: 0, //计算后总价
      use_deduction_credit: 0, //用户可使用最大抵扣积分
      kou_credit: 0, //选择使用的抵扣积分
      shop_id: "", //购物车json对象
      deduction_credit_status: false,
      is_cross_border: false,
      idCard: "",
      shopdata: {}
    };
  },

  onLoad: function (options) {
    wx.setNavigationBarTitle({
      title: "确认订单"
    });
    if (options.shop_id) {
      this.shop_id = options.shop_id;
    }
    this.sign_mark = options.sign;
    this.goods_id = options.goods_id;
    this.good_spec_price_id = options.good_spec_price_id;
    this.good_num = options.num;
    this.shop_detail();
    //初始化优惠券
    this.ticket_isShow = false; //优惠券弹框
    this.canuse_ticket = [];
    this.ticket_min_money = 0;
    this.ticket_money = "0.00";
    this.ticket_id = 0;
    this.t_ticket_name = "";
    this.idCard = "";
  },
  onShow () {
    this.userInfo = wx.getStorageSync("address_info");
  },
  watch: {
    // chajia_price
    kou_credit (newVal) {
      // 如果抵扣后价格小于当前抵用券的价格   优惠券清空
      if (this.chajia_price < this.ticket_money) {
        this.ticket_money = "0.00";
        this.ticket_id = 0;
        this.t_ticket_name = "";
        this.canuse_ticket.forEach(val => {
          val.is_selected = false
        })
      }
      //   this.ticket_array = this.ticket_list.filter(val => {
      //     return val.type_money < this.dikou_point
      //   })
    }
  },
  methods: {
    //优惠券列表动态更新
    reset_tacket () {
      // 差价 = 总价 - 积分
      let jfcj = parseFloat(
        (this.all_price * 100 - this.kou_credit * 100) / 100
      ).toFixed(2);
      let arr = [];
      //   this.chajia_price = jfcj;
      //优惠券满足金额
      this.ticket_min_money = parseFloat(this.ticket_min_money * 100 / 100);
      //已选优惠券满足金额 > 差价 重置优惠券
      if (this.ticket_min_money > jfcj) {
        this.ticket_min_money = 0;
        this.ticket_money = "0.00";
        this.ticket_id = 0;
        this.t_ticket_name = "";
      }
      // 遍历优惠券列表
      this.ticket.forEach((element, index) => {
        // 优惠券满足金额 > 差价 置灰
        if (parseFloat(element.type_min_money * 100 / 100) > jfcj) {
          element.can_active = true;
          element.is_selected = false;
        } else {
          element.can_active = false;
          arr.push(element);
        }
      });
      this.canuse_ticket = arr;
    },
    //输入使用积分
    credite_input () {
      //输入积分 > 用户可使用最大抵扣积分 = 用户可使用最大抵扣积分
      if (this.kou_credit > this.use_deduction_credit) {
        this.kou_credit = this.use_deduction_credit;
      }
      //输入积分 > 0 且 < 用户可使用最大抵扣积分 -> 显示输入积分 正则去除数字前面的0
      if (this.kou_credit > 0 && this.kou_credit < this.use_deduction_credit) {
        this.kou_credit = this.kou_credit.replace(/\b(0+)/gi, "");
      }
      //输入积分小于0或者为空时显示为0
      if (this.kou_credit - 0 <= 0 || this.kou_credit == "") {
        this.kou_credit = 0;
      }
      //重置优惠券列表
      this.reset_tacket();
      //价格合计计算
      this.addtion_price();
    },
    //积分加减
    creadite_fix (e) {
      if (e == 0) {
        //积分 -
        if (this.kou_credit > 0) {
          //如果框内积分 >0 积分-
          this.kou_credit--;
        }
      }
      if (e == 1) {
        //积分+
        if (this.kou_credit < this.use_deduction_credit) {
          //如果框内积分 <最大可使用积分 积分+
          this.kou_credit++;
        }
      }
      //重置优惠券列表
      this.reset_tacket();
      //价格合计
      this.addtion_price();
    },
    //选择优惠券
    chech_ticket () {
      //如果后台返回优惠券列表 >0 时 -> 显示选择优惠券弹窗
      if (this.ticket.length > 0) {
        this.ticket_isShow = true;
      }
    },
    //清空备注
    clear_inp () {
      this.book_inp = "";
    },
    //使用优惠券
    use_ticket (e) {
      //置灰的优惠券不可点击
      if (e.can_active) {
        return;
      }
      if (e.is_selected) {
        e.is_selected = !e.is_selected;
      } else {
        this.ticket.forEach(el => {
          el.is_selected = false;
        });
        e.is_selected = !e.is_selected;
      }
      if (e.is_selected) {
        //如果为true -> 选中
        this.ticket_min_money = e.type_min_money;
        this.ticket_money = e.type_money.toFixed(2);
        this.ticket_id = e.id;
        this.t_ticket_name = e.type_name;
      } else {
        // false -> 没选中
        this.ticket_min_money = 0;
        this.ticket_money = "0.00";
        this.ticket_id = 0;
        this.t_ticket_name = "";
      }
      //价格合计
      this.addtion_price();
      // this.closeMask();
    },
    //选择收获地址
    choose_add () {
      wx.navigateTo({ url: "/pages/package_mine/address_list/main?status=1" });
    },
    //价格合计
    addtion_price () {
      console.log(this.all_price,
        this.shopdata.plus_price,
        this.ticket_money,
        this.kou_credit,
        this.freight_price);

      if (
        parseFloat(
          (this.all_price * 100 -
            this.ticket_money * 100 -
            this.kou_credit * 100) /
          100
        ) <= 0
      ) {
        //总价为0
        this.fixes_price = this.freight_price;
        this.chajia_price = this.freight_price;
      } else {
        //总价不为0
        this.fixes_price = parseFloat(
          (this.all_price * 100 -
            this.ticket_money * 100 -
            this.kou_credit * 100 +
            this.freight_price * 100) /
          100
        ).toFixed(2);
        this.chajia_price = parseFloat(
          (this.all_price * 100 -
            this.kou_credit * 100 +
            this.freight_price * 100) /
          100
        ).toFixed(2);
      }
    },
    //关闭弹窗
    closeMask () {
      this.isHidden = false;
      this.ticket_isShow = false;
    },
    //获取商品详情
    shop_detail () {
      let that = this;
      common.mmk_Loading(0);
      let api = "";
      let data = {};
      if (that.sign_mark == 1) {
        //签到领取面膜
        api = "api/v4_2/sign_in/store";
        data = "";
      }
      if (that.sign_mark == 2) {
        //普通商品
        api = "api/v4_2/shop_order/affirm";
        data = { ids: that.shop_id };
      }
      if (that.sign_mark == 3) {
        //换购商品
        api = "api/v4_2/sign/goods_exchange";
        data = { id: that.goods_id };
      }
      if (that.sign_mark == 4) {
        //立即购买
        api = "api/v4_2/shop_order/place";
        data = {
          goods_id: that.goods_id,
          good_spec_price_id: that.good_spec_price_id,
          num: that.good_num
        };
      }
      common.fly_post(api, data, response => {
        common.mmk_Loading(1);
        let res = response.data;
        if (res.status_code == 0) {
          that.shopdata = res.data
          that.shopList = res.data.data;
          console.log(this.shopList)
          res.data.data.forEach(item => { //购物车是否有跨境商品
            if (item.cross_border == 1) {
              this.is_cross_border = true;
            }
          });
          if (that.sign_mark == 1 || that.sign_mark == 3) {
            that.good_num = res.data.data[0].good_num;
          }
          that.all_price = parseFloat((res.data.all_price * 100 - (that.shopdata.plus_price || 0) * 100) / 100).toFixed(2);
          that.user_create = res.data.user_credit;
          that.freight_price = parseFloat(res.data.freight_price).toFixed(2);
          that.kou_credit = res.data.all_deduction_credit || 0;
          that.deduction_credit_status = res.data.deduction_credit_status;
          that.use_deduction_credit = res.data.all_deduction_credit;
          console.log(that.all_price,
            that.shopdata.plus_price,
            that.kou_credit,
            that.freight_price * 100);

          that.fixes_price = parseFloat(
            (this.all_price * 100 -
              this.kou_credit * 100 +
              this.freight_price * 100) /
            100
          ).toFixed(2);
          that.chajia_price = parseFloat(
            (this.all_price * 100 - this.kou_credit * 100) / 100
          ).toFixed(2);

          let ticket = res.data.tickets;
          if (ticket != null) {
            ticket.forEach(element => {
              element.start = new Date(element.send_start_time * 1000).Format(
                "yyyy.MM.dd"
              );
              element.end = new Date(element.send_end_time * 1000).Format(
                "yyyy.MM.dd"
              );
              let condtion = element.condtion;
              if (condtion == 1) {
                element.con = "品质医美 ";
              } else if (condtion == 2) {
                element.con = "积分商城 ";
              }
              //如果优惠券满足金额>(总价-初始积分) -> true 置灰不可选择
              if (
                element.type_min_money * 100 >
                that.all_price * 100 - that.kou_credit * 100
              ) {
                element.can_active = true;
                element.is_selected = false; //没选中
              } else {
                element.can_active = false; //不置灰
                element.is_selected = false; //没选中
                that.canuse_ticket.push(element);
              }
            });
            that.ticket = ticket;
          }
        } else {
          common.mmk_Loading(1);
          common.mmk_Loading(2, res.message);
          setTimeout(() => {
            wx.navigateBack({
              delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
            });
          }, 1500);
        }
      });
    },
    //点击提交订单
    submitOrder () {
      console.log("hehehe");
      let that = this;
      if (!this.userInfo.address) {
        common.mmk_Loading(2, "收货地址不能为空");
      } else if (this.is_cross_border && this.idCard == "") {
        common.mmk_Loading(2, "因海关需要，请填写收货人身份证号");
      } else {
        that.orderList();

      }
    },
    //提交订单function
    orderList () {
      let obj = {
        address_id: this.userInfo.id, //地址
        ticket_id: this.ticket_id, //优惠券
        user_remark: this.book_inp, //备注
        credit: this.kou_credit, //使用积分
        id_card: this.idCard,     //身份证号
      };
      if (this.sign_mark == 1) {
        //签到
        obj.type = 2;
        obj.good_num = this.good_num;
      }
      if (this.sign_mark == 2) {
        //购物车
        obj.ids = this.shop_id;
        obj.type = 1;
      }
      if (this.sign_mark == 3) {
        //换购
        obj.type = 3;
        obj.goods_id = this.goods_id;
        obj.good_num = this.good_num;
      }
      if (this.sign_mark == 4) {
        //立即购买
        obj.type = 4;
        obj.goods_id = this.goods_id;
        obj.good_num = this.good_num;
        obj.good_spec_price_id = this.good_spec_price_id;
      }

      if (this.kou_credit > 0) {
        common.mmk_Loading(0);
        common.fly_post(
          "api/v4_2/order/order_submit",
          { order_credit: this.kou_credit },
          response => {
            common.mmk_Loading(1);
            let res = response.data;
            if (res.status_code == 0) {
              let user_credit = res.data.user_credit;
              let content = "";
              if (user_credit > 0) {
                content =
                  "本次消费将消耗" +
                  this.kou_credit +
                  "积分（含可提现积分" +
                  user_credit +
                  "），是否继续";
              } else {
                content = "本次消费将消耗" + this.kou_credit + "积分，是否继续";
              }
              wx.showModal({
                title: "", //提示的标题,
                content: content, //提示的内容,
                showCancel: true, //是否显示取消按钮,
                cancelText: "取消", //取消按钮的文字，默认为取消，最多 4 个字符,
                cancelColor: "#333333", //取消按钮的文字颜色,
                confirmText: "继续", //确定按钮的文字，默认为取消，最多 4 个字符,
                confirmColor: "#FF383E", //确定按钮的文字颜色,
                success: res => {
                  if (res.confirm) {
                    common.mmk_Loading(0);
                    common.fly_post(
                      "api/v4_2/shop_order/submit",
                      obj,
                      response => {
                        common.mmk_Loading(1);
                        let res = response.data;
                        if (res.status_code == 0) {
                          if (res.data.order_price <= 0) {
                            wx.redirectTo({
                              url: "/pages/package_projects/pay_success/main"
                            });
                          } else {
                            common.wechat_pay(
                              res.data.body_title,
                              res.data.order_sn,
                              res.data.order_price,
                              1
                            );
                          }

                        } else {
                          common.mmk_Loading(1);
                          common.mmk_Loading(2, res.message);
                          setTimeout(() => {
                            this.closeMask();
                          }, 2000);
                        }
                      }
                    );
                  } else if (res.cancel) {
                  }
                }
              });
            } else {
              common.mmk_Loading(1);
              common.mmk_Loading(2, res.message);
              setTimeout(() => {
                this.closeMask();
              }, 2000);
            }
          }
        );
      } else {
        common.mmk_Loading(0);
        common.fly_post("api/v4_2/shop_order/submit", obj, response => {
          common.mmk_Loading(1);
          let res = response.data;
          if (res.status_code == 0) {
            if (res.data.order_price <= 0) {
              wx.redirectTo({
                url: "/pages/package_projects/pay_success/main"
              });
            } else {
              common.wechat_pay(
                res.data.body_title,
                res.data.order_sn,
                res.data.order_price,
                1
              );
            }
          } else {
            common.mmk_Loading(1);
            common.mmk_Loading(2, res.message);
            setTimeout(() => {
              this.closeMask();
            }, 2000);
          }
        });
      }
    },
    //未获取到openid时冲重新请求登陆接口
    get_info (e) {
      let that = this;
      wx.login({
        success: result => {
          common.fly_post(
            "api/v4_2/minapp/login",
            {
              code: result.code,
              iv: e.mp.detail.iv,
              encryptedData: e.mp.detail.encryptedData,
              avatarUrl: e.mp.detail.userInfo.avatarUrl,
              nickName: e.mp.detail.userInfo.nickName,
              sid: ""
            },
            response => {
              let res = response.data;
              if (res.status_code == 0) {
                wx.setStorageSync("user_token", res.data.token);
                wx.setStorageSync("user_id", res.data.user_id);
                wx.setStorageSync("open_id", res.data.user_jwt);
                console.log(12355, res.data.user.data.role_id)
                wx.setStorageSync("role_id", res.data.user.data.role_id);
                console.log(444444, wx.getStorageSync("role_id"))
                that.url_path = "mine";
              } else {
                common.mmk_Loading(2, res.message);
              }
            }
          );
        },
        fail: () => {
          common.mmk_Loading(2, "登录失败");
        }
      });
    },
    // 跳转PLUS
    to_plus () {
      wx.switchTab({ url: '/pages/plus/main' });
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  font-size: 14px;
  color: #888;
  background: #f3f4f6;
  //收货地址
  .info {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    background: #ffffff;
    .user_name {
      width: 100%;
      box-sizing: border-box;
      font-size: 14px;
      color: #444;
      padding: 10px 43px 5px;
      position: relative;
      .tel {
        position: absolute;
        right: 12%;
        color: #666;
      }
    }
    .dv {
      padding: 0 15px;
      .icon_gps {
        width: 25px;
        height: 25px;
        vertical-align: top;
        margin-right: 3.5px;
        position: relative;
        left: -3px;
        top: -7px;
      }
      .icon_right {
        width: 30px;
        height: 30px;
        vertical-align: top;
        position: relative;
        left: 27px;
        top: -10px;
      }
      .address {
        display: inline-block;
        width: 76.5%;
        font-size: 12px;
        color: #444;
      }
    }
    .un_dv {
      width: 100%;
      margin: 0 auto;
      padding: 10px 0;
      position: relative;
      .goto_choose {
        font-size: 16px;
        color: #444;
        text-align: center;
        margin: 10px 0;
      }

      .n_icon {
        position: absolute;
        width: 28px;
        height: 28px;
        display: block;
        margin-top: 2px;
        right: 10px;
        bottom: 15px;
      }
    }
    .address_line {
      width: 100%;
      height: 4px;
      background-image: url("https://h5.ameimeika.com/mp_images/jifenshangcheng/dingdanqueren/dizhitiao@2x.png");
      background-repeat: no-repeat;
      margin-top: 10px;
    }
  }
  .mall {
    width: 100%;
    background: #ffffff;
    padding: 8px 18px;
    overflow: hidden;
    border-bottom: solid 1px #eee;
    .shop_left {
      float: left;
      width: 20%;
      .mall_img {
        display: block;
        width: 65px;
        height: 65px;
      }
    }
    .shop_right {
      float: left;
      width: 70%;
      .mall_name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #333333;
        font-size: 12px;
        line-height: 18px;
        .icon {
          width: 40px;
          height: 14px;
          display: inline-block;
          background: url("https://img.ameimeika.com/h5_images/mp_images/mp_3.0/mall/kuajing.png")
            no-repeat;
          background-size: 100% 100%;
          vertical-align: top;
        }
      }

      .plus {
        padding: 0 5px;
        margin: 4px 0;
        line-height: 16px;
        font-size: 10px;
        font-family: "PingFangSC-Medium", "PingFang SC";
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        background-image: url(https://img.ameimeika.com/h5_images/mp_images/mp_3.0.2/plus_bg%402x.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        display: inline-block;
      }
      .mall_specs {
        margin-top: 6px;
        font-size: 12px;
        .mall_specs_left,
        .mall_specs_right {
          display: inline-block;
          width: 50%;
        }
        .mall_specs_right {
          text-align: right;
        }
      }
      .mall_price {
        margin-top: 6px;
        color: #ff383e;
        font-size: 11px;
        opacity: 0.7;
        .mall_price_right {
          padding-right: 4px;
          font-size: 16px;
          opacity: 1;
        }
      }
    }
  }

  .plus {
    margin: 10px 0;
    padding: 0 15px;
    background-color: #fff;
    .tip {
      font-size: 12px;
      font-family: "PingFangSC-Medium", "PingFang SC";
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      line-height: 37px;
      float: left;
    }

    .num {
      font-size: 16px;
      font-family: "STHeitiTC-Medium", "STHeitiTC";
      font-weight: 500;
      color: rgba(255, 56, 62, 1);
      line-height: 37px;
      float: right;
    }
    .open {
      float: right;
      font-size: 12px;
      font-family: "PingFangSC-Regular", "PingFang SC";
      font-weight: 400;
      color: rgba(236, 88, 139, 1);
      line-height: 37px;
      .icon {
        width: 6px;
        height: 12px;
        display: inline-block;
        vertical-align: middle;
        margin-left: 5px;
        line-height: 37px;
      }
    }
  }

  .use_count {
    font-size: 12px;
    font-family: "PingFangSC-Medium", "PingFang SC";
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    padding: 8px 15px;
    .use_count_jf {
      color: #ff7100;
    }
  }
  .quan_yunfei {
    margin-top: 10px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 1);
  }
  .specification {
    width: 100%;
    height: 48px;
    line-height: 48px;
    padding-left: 15px;
    box-sizing: border-box;
    position: relative;
    .tips {
      width: 20px;
      height: 20px;
      border-radius: 3px;
      line-height: 20px;
      text-align: center;
      background-color: #fe6a9c;
      color: #fff;
      font-size: 14px;
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
    }
    .tips_gray {
      background: #d8d8d8;
    }
    .selections {
      font-size: 14px;
      font-family: "Regular";
      color: rgba(68, 68, 68, 1);
      float: left;
      margin-left: 30px;
    }

    .icon {
      width: 24px;
      display: block;
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .chhoose_use_jf {
    padding: 0 15px;
    background: #fff;
    overflow: hidden;
    .chhoose_use_intro {
      font-size: 12px;
      font-family: "PingFangSC-Medium", "PingFang SC";
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      line-height: 32px;
      float: left;
      width: 72%;
      .chhoose_intro_num {
        color: #ff383e;
        .money_icon {
          font-size: 10px;
          display: inline;
          position: relative;
          left: -1px;
        }
      }
    }
    .chhoose_use_sel {
      text-align: center;
      float: right;
      width: 28%;
      margin-top: 5px;
      .num_less,
      .num_add {
        border: solid 1px #cccccc;
        display: inline-block;
        width: 20px;
        height: 20px;
      }
      .num_less {
        border-right: 0;
      }
      .num_add {
        border-left: 0;
      }
      .num_self {
        border: solid 1px #cccccc;
        display: inline-block;
        width: 45px;
        height: 12px;
        min-height: 20px;
        vertical-align: top;
      }
    }
  }
  .note_book {
    margin-bottom: 10px;
    padding: 8px 15px;
    overflow: hidden;
    background: #ffffff;
    .beizhu {
      float: left;
      width: 12%;
      color: #444444;
      position: relative;
      top: 2px;
      &.beizhu1 {
        width: auto;
        margin-right: 32px;
        height: 25px;
        line-height: 25px;
      }
    }
    .beizhu_inp {
      float: left;
      width: 260px;
      color: #333333;
      position: relative;
      top: 1.5px;
      &.inp1 {
        width: 72%;
      }
    }
    .beizhu_icon {
      float: left;
      width: 10%;
      position: relative;
      top: 3px;
      left: 24px;
    }
  }
  //价格明细
  .price_detail {
    font-size: 12px;
    padding: 2px 15px;
    background: #fff;
    .price_intro {
      margin-top: 5px;
      .price_intro_left {
        display: inline-block;
        width: 50%;
        text-align: left;
        color: #333333;
        font-weight: 600;
      }
      .fontSize {
        font-size: 12px;
      }
      .price_intro_right {
        font-size: 16px;
        display: inline-block;
        width: 50%;
        text-align: right;
        color: #ff383e;
        .money_icon {
          font-size: 12px;
          display: inline;
        }
        .create_icon {
          color: #ff7100;
          margin-right: 4px;
        }
      }
      .jsfont {
        color: #ff7100;
      }
      .youhui_gray {
        color: #999999;
      }
    }
    .last_price {
      border-top: solid 1px #e0e0e0;
      margin-top: 8px;
      padding: 6px 0;
    }
  }

  //   抵扣后金额
  .price_result {
    font-size: 12px;
    padding: 2px 15px;
    background: #fff;
    .price_intro {
      .price_intro_left {
        display: inline-block;
        width: 50%;
        text-align: left;
        color: #333333;
        font-weight: 600;
      }
      .fontSize {
        font-size: 12px;
      }
      .price_intro_right {
        font-size: 16px;
        display: inline-block;
        width: 50%;
        text-align: right;
        color: #ff383e;
        .money_icon {
          font-size: 12px;
          display: inline;
        }
        .create_icon {
          color: #ff7100;
          margin-right: 4px;
        }
      }
      .jsfont {
        color: #ff7100;
      }
      .youhui_gray {
        color: #999999;
      }
    }
    .last_price {
      margin: 0;
      border: none;
    }
  }

  /* 优惠券 */
  .mask {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9999;
    .mallbox {
      position: absolute;
      width: 100%;
      max-height: 85%;
      box-sizing: border-box;
      background: #fff;
      z-index: 99999;
      color: #444;
      bottom: 0px;
      left: 0;
      .mall_box {
        .title {
          width: 100%;
          text-align: right;
          .close {
            font-size: 20px;
            padding: 12px 0;
          }
        }
        .titles {
          width: 100%;
          overflow: hidden;
          position: relative;
          border-bottom: solid 1px #e0e0e0;
          padding: 8px 0;
          .title_t {
            font-size: 16px;
            text-align: center;
            width: 100%;
            float: left;
            color: #333333;
          }
          .close {
            position: absolute;
            font-size: 34px;
            text-align: right;
            width: 50px;
            right: 13px;
            top: -6px;
            font-weight: 400;
            opacity: 0.7;
          }
        }
        // 选择优惠券
        .list {
          width: 100%;
          padding-top: 10px;
          padding-bottom: 50px;
          .ticket {
            display: flex;
            height: 92px;
            margin: 10px 0;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0px 2px 8px 0px rgba(164, 178, 193, 0.45);
            overflow: hidden;
            position: relative;
            .left {
              width: 98px;
              height: 100%;
              border-right: 1px dashed rgba(235, 235, 235, 1);
              position: relative;
              .center {
                width: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                .money {
                  text-align: center;
                  .icon {
                    font-size: 12px;
                    font-family: "STHeitiTC-Medium", "STHeitiTC";
                    font-weight: 500;
                    color: rgba(220, 47, 107, 1);
                    display: inline-block;
                    vertical-align: bottom;
                  }
                  .num {
                    font-size: 26px;
                    font-family: "STHeitiTC-Medium", "STHeitiTC";
                    font-weight: 500;
                    color: rgba(220, 47, 107, 1);
                    line-height: 24px;
                    display: inline-block;
                    vertical-align: bottom;
                  }
                }
                .tip {
                  font-size: 12px;
                  font-family: "PingFangSC-Regular", "PingFang SC";
                  font-weight: 400;
                  color: rgba(235, 118, 158, 1);
                  line-height: 17px;
                  text-align: center;
                  margin-top: 6px;
                }
                &.special {
                  font-size: 18px;
                  font-family: "PingFangSC-Semibold", "PingFang SC";
                  font-weight: 600;
                  color: rgba(220, 47, 107, 1);
                  line-height: 24px;
                  text-align: center;
                }
              }

              &::before {
                content: "";
                width: 10px;
                height: 10px;
                border-radius: 50%;
                display: block;
                background-color: #fff;
                box-shadow: 0px 2px 8px 0px inset rgba(164, 178, 193, 0.45);
                position: absolute;
                top: 0;
                right: 0;
                transform: translate(50%, -50%);
              }
              &::after {
                content: "";
                width: 10px;
                height: 10px;
                border-radius: 50%;
                display: block;
                background-color: #fff;
                box-shadow: 0px 2px 8px 0px inset rgba(164, 178, 193, 0.45);
                position: absolute;
                bottom: 0;
                right: 0;
                transform: translate(50%, 50%);
              }
            }
            .right {
              flex: 1;
              padding: 10px;
              box-sizing: border-box;
              position: relative;
              .t-title {
                font-size: 16px;
                font-family: "PingFangSC-Medium", "PingFang SC";
                font-weight: 500;
                line-height: 20px;
                display: flex;
                .t-type {
                  color: rgba(254, 120, 158, 1);
                  vertical-align: middle;
                  display: inline-block;
                }
                .t-name {
                  color: rgba(29, 32, 35, 1);
                  vertical-align: middle;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 1;
                  -webkit-box-orient: vertical;
                  flex: 1;
                }
              }
              .dec {
                font-size: 12px;
                font-family: "PingFangSC-Regular", "PingFang SC";
                font-weight: 400;
                color: rgba(63, 69, 75, 1);
                line-height: 16px;
                margin-top: 5px;
              }
              .timer {
                font-size: 12px;
                font-family: "PingFangSC-Regular", "PingFang SC";
                font-weight: 400;
                color: rgba(96, 105, 114, 1);
                line-height: 16px;
                position: absolute;
                left: 10px;
                bottom: 10px;
              }
            }
            .user-btn {
              width: 24px;
              height: 24px;
              position: absolute;
              bottom: 5px;
              right: 7px;
              .img {
                width: 100%;
                height: 100%;
              }
            }
          }
          //   .mask-used {
          //     opacity: 0.5;
          //   }
          .disabled {
            filter: grayscale(1);
          }
        }
        .mallInfo {
          height: 100px;
          display: flex;
          padding-bottom: 10px;
          border-bottom: solid 1px #eeeeee;
          .mallImg {
            width: 100px;
            height: 100px;
            margin-right: 10px;
            display: inline-block;
          }
          .right {
            width: 60%;
            .mall_row1 {
              height: 24px;
              font-size: 17px;
              color: #f64665;
              margin-top: 19px;
              .rmb_icon {
                width: 12px;
                height: 12px;
              }
              .orange {
                color: #ff7100;
              }
            }
            .mall_row2 {
              font-size: 12px;
              width: 40%;
              margin-bottom: 10px;
              text-decoration: line-through;
              color: #888;
            }
            .mall_row3 {
              font-size: 14px;
              color: #444;
            }
          }
        }
        .dv {
          clear: both;
          height: auto;
          margin-bottom: 30px;
          .mall_choose {
            height: 20px;
            display: inline-block;
            font-size: 14px;
            color: #444;
            margin: 10px;
            clear: both;
          }

          .mall_type {
            width: 100%;
            height: auto;
            margin-bottom: 10px;
            clear: both;
            .mall_style {
              float: left;
              width: auto;
              height: 30px;
              line-height: 30px;
              border-radius: 15px;
              border: 0.5px solid #ccc;
              color: #999;
              margin: 0 10px 10px 0;
              text-align: center;
              padding: 0 10px;
            }
            .active {
              color: #f64665;
              border: 0.5px solid #f64665;
            }
          }
        }

        .mall_choose1 {
          width: 100%;
          height: 20px;
          display: inline-block;
          font-size: 14px;
          color: #444;
          margin: 10px 0;
          text-align: left;
          clear: both;
        }
        .mall_type1 {
          width: 100%;
          height: auto;
          margin-bottom: 10px;
          clear: both;
          .mall_style1 {
            float: left;
            width: 80px;
            height: 30px;
            line-height: 30px;
            border-radius: 15px;
            border: 0.5px solid #ccc;
            color: #999;
            margin: 0 10px 10px 0;
            text-align: center;
          }
          .active {
            color: #f64665;
            border: 0.5px solid #f64665;
          }
        }

        .choose {
          height: 28px;
          line-height: 28px;
          clear: both;
          font-size: 14px;
          color: #444;
          margin-bottom: 24px;
          margin-top: 10px;
          position: relative;
          .num {
            width: 105px;
            height: 28px;
            position: absolute;
            right: 0;
            top: -17%;
            line-height: 28px;
            text-align: center;
            .numBtn {
              width: 28px;
              height: 28px;
              font-size: 17px;
              color: #888;
              border: 0.5px solid #ccc;
              display: inline-block;
            }
            .num_mid {
              width: 42px;
              height: 30px;
              font-size: 14px;
              color: #444;
              display: inline-block;
            }
          }
        }
      }

      .comfirmBtn {
        width: 100%;
        height: 44px;
        line-height: 44px;
        border-radius: 0;
        color: #fff;
        background: #ff383e;
      }
    }
    .add_radius {
      border-radius: 10px 10px 0 0;
    }
  }
}
.bottom {
  box-shadow: 0px 0px 6px #ddd;
  width: 100%;
  height: 50px;
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  .bottom_item {
    position: relative;
    .total_bottom {
      font-size: 12px;
      color: #666666;
      width: 120px;
      position: absolute;
      right: 106px;
      text-align: right;
      top: 14px;
      .money_icon {
        font-size: 12px;
        color: #ff383e;
      }
      .money {
        color: #ff383e;
        font-size: 14px;
      }
    }
    .calculate {
      position: absolute;
      right: 13px;
      top: 5px;
      width: 88px;
      height: 39px;
      font-size: 12px;
      background: #ff383e;
      border-radius: 20px;
      color: #fff;
      line-height: 36px;
    }
  }
}
.zhanwei {
  width: 100%;
  height: 70px;
}
</style>


